<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>我的店铺管理</p>
		</header>

		<!-- 操作按钮部分 -->
		<div class="operation-bar">
			<button class="add-btn" @click="toAddStore">
				<i class="fa fa-plus"></i> 添加店铺
			</button>
		</div>

		<!-- 店铺列表部分 -->
		<ul class="store-list">
			<li v-for="(item, index) in storeArr" :key="item.id" class="store-item" @click="toBusinessManage(item.id)">
				<div class="store-img">
					<img :src="item.businessImg" alt="店铺图片">
				</div>
				<div class="store-details">
					<h3>{{ item.businessName }}</h3>
					<p class="store-address">{{ item.businessAddress }}</p>
					<p class="store-desc">{{ item.businessExplain }}</p>
					<div class="store-info">
						<p>起送价: ¥{{ item.startPrice }}</p>
						<p>配送费: ¥{{ item.deliveryPrice }}</p>
					</div>
				</div>
				<div class="store-actions">
					<button class="edit-btn" @click.stop="toEditStore(item.id)">
						<i class="fa fa-pencil"></i> 编辑
					</button>
					<button class="delete-btn" @click.stop="deleteStore(item.id, index)">
						<i class="fa fa-trash"></i> 删除
					</button>
				</div>
			</li>
			<li v-if="storeArr.length === 0" class="empty-tip">
				暂无店铺数据，点击"添加店铺"按钮创建新店铺
			</li>
		</ul>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'StoreManagement',
		data() {
			return {
				storeArr: []
			};
		},
		created() {
			const token = localStorage.getItem('id_token');
			if (!token) {
				this.$router.push('/login');
				return;
			}
			this.getStoreList();
		},
		components: {
			Footer
		},
		methods: {
			// 获取店铺列表
			getStoreList() {
				const token = localStorage.getItem('id_token');
				this.$axios.get('businesses/users', {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				}).then(response => {
					const result = response.data;
					if (result.success && result.code === 200) {
						this.storeArr = result.data;
					} else {
						alert('获取店铺列表失败：' + (result.message || '未知错误'));
					}
				}).catch(error => {
					console.error('获取店铺列表出错：', error);
				});
			},

			// 跳转到添加店铺页面
			toAddStore() {
				this.$router.push('/addStore');
			},

			// 跳转到编辑店铺页面
			toEditStore(storeId) {
				this.$router.push({
					path: '/editStore',
					query: {
						storeId: storeId
					}
				});
			},
			//跳转到商品管理页面
			toBusinessManage(businessId) {
				this.$router.push({
					path: '/businessManage',
					query: {
						businessId: businessId
					}
				});
			},

			// 删除店铺
			deleteStore(storeId, index) {
				if (confirm('确定要删除该店铺吗？')) {
					const token = localStorage.getItem('id_token');
					this.$axios.delete(`businesses/${storeId}`, {
						headers: {
							'Authorization': `Bearer ${token}`
						}
					}).then(response => {
						const result = response.data;
						if (result.success && result.code === 200) {
							this.storeArr.splice(index, 1);
							alert('删除成功');
						} else {
							alert('删除失败：' + (result.message || '未知错误'));
						}
					}).catch(error => {
						console.error('删除店铺出错：', error);
					});
				}
			},

			// // 切换店铺状态（营业/关闭）
			// toggleStatus(item, index) {
			// 	const token = localStorage.getItem('id_token');
			// 	const newStatus = item.status === 1 ? 0 : 1;

			// 	this.$axios.patch(`businesses/${item.id}`, {
			// 		status: newStatus
			// 	}, {
			// 		headers: {
			// 			'Authorization': `Bearer ${token}`
			// 		}
			// 	}).then(response => {
			// 		const result = response.data;
			// 		if (result.success && result.code === 200) {
			// 			this.storeArr[index].status = newStatus;
			// 			alert(`店铺已${newStatus === 1 ? '营业' : '关闭'}`);
			// 		} else {
			// 			alert('状态更新失败：' + (result.message || '未知错误'));
			// 		}
			// 	}).catch(error => {
			// 		console.error('更新店铺状态出错：', error);
			// 	});
			// }
		}
	};
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		min-height: 100%;
		background-color: #f5f5f5;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 操作按钮部分 ******************/
	.wrapper .operation-bar {
		width: 100%;
		padding: 3vw;
		margin-top: 12vw;
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
	}

	.wrapper .operation-bar .add-btn {
		background-color: #0097EF;
		color: #fff;
		border: none;
		border-radius: 4vw;
		padding: 1.5vw 4vw;
		font-size: 3.5vw;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.wrapper .operation-bar .add-btn i {
		margin-right: 1.5vw;
	}

	/****************** 店铺列表部分 ******************/
	.wrapper .store-list {
		width: 100%;
		padding-bottom: 14vw;
	}

	.wrapper .store-list .store-item {
		width: 100%;
		background-color: #fff;
		margin-bottom: 2vw;
		box-sizing: border-box;
		padding: 3vw;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.wrapper .store-list .store-item .store-img {
		width: 20vw;
		height: 20vw;
		flex-shrink: 0;
	}

	.wrapper .store-list .store-item .store-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 1vw;
	}

	.wrapper .store-list .store-item .store-details {
		flex-grow: 1;
		margin-left: 3vw;
		position: relative;
		height: 20vw;
		display: flex;
		flex-direction: column;
	}

	.wrapper .store-list .store-item .store-details h3 {
		font-size: 4vw;
		color: #333;
		margin-bottom: 1vw;
	}

	/* 新增地址样式 */
	.wrapper .store-list .store-item .store-details .store-address {
		font-size: 3vw;
		color: #666;
		margin-bottom: 1vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wrapper .store-list .store-item .store-details .store-desc {
		font-size: 3vw;
		color: #888;
		margin-bottom: 1.5vw;
		flex-grow: 1;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.wrapper .store-list .store-item .store-details .store-info {
		font-size: 3vw;
		color: #666;
		display: flex;
		gap: 2vw;
	}

	.wrapper .store-list .store-item .store-details .store-status {
		position: absolute;
		top: 3vw;
		right: 3vw;
		font-size: 2.8vw;
		padding: 0.5vw 2vw;
		border-radius: 2vw;
	}

	.wrapper .store-list .store-item .store-details .status-active {
		background-color: #e8f4ea;
		color: #38ca73;
	}

	.wrapper .store-list .store-item .store-details .status-inactive {
		background-color: #fef0f0;
		color: #f53f3f;
	}

	.wrapper .store-list .store-item .store-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 2vw;
	}

	.wrapper .store-list .store-item .store-actions button {
		border: none;
		background: none;
		font-size: 2.8vw;
		padding: 1vw 2vw;
		margin-bottom: 1vw;
		cursor: pointer;
		border-radius: 1vw;
	}

	.wrapper .store-list .store-item .store-actions .edit-btn {
		color: #0097EF;
		background-color: #e6f2ff;
	}

	.wrapper .store-list .store-item .store-actions .delete-btn {
		color: #f53f3f;
		background-color: #fef0f0;
	}

	.wrapper .store-list .store-item .store-actions .status-btn {
		color: #ff7d00;
		background-color: #fff7e6;
	}

	.wrapper .store-list .empty-tip {
		text-align: center;
		padding: 15vw 0;
		color: #999;
		font-size: 3.5vw;
		background-color: #fff;
		margin: 2vw;
		border-radius: 2vw;
	}
</style>